<template>
    <Card>
        <Button class="ivu-mb-16" type="primary" @click="handleEdit(false)"
                v-hasC="{name: '-v1-vps-vps-vps-add',flag: '/v1/vps/vps/vps-add'}">新增</Button>
        <JG-table
            :params="params"
            :data="data"
            :loading="loading"
            :columns="columns"
            :total="total"
            :butshow="butshow"
            @askData="askData"
            @handleEdit="handleEdit"
            @handleDelete="handleDelete"></JG-table>
        <modal ref="modal" @askData="askData"/>
        <Modal
            v-model="modaldel"
            title="删除提醒"
            @on-cancel="cancel" width="420">
            <p >请先将当前服务器上所有域名迁移到其他服务器，方可删除。否则，将无法删除。</p>
            <div slot="footer">
                <Button type="error" :loading="modal_loading" @click="del">确定删除</Button>
                <Button @click="cancel">取消</Button>
            </div>
        </Modal>
    </Card>
</template>
<script>
    import modal from './modal';
    import { vpsvpsvpslist, vpsvpsvpsdelete } from '@api/VPSsetting';
    export default {
        components: { modal },
        name: '',
        data () {
            return {
                butshow: {
                    Edit: {
                        name: '-v1-vps-vps-vps-add2',
                        flag: '/v1/vps/vps/vps-add'
                    },
                    Delete: {
                        name: '-v1-vps-vps-vps-delete',
                        flag: '/v1/vps/vps/vps-delete'
                    }
                },
                loading: false,
                total: -1,
                params: { page: 0, pageSize: 0 },
                paramsinitial: [ 1, 2, 3 ],
                columns: [
                    { title: 'ID', key: 'id', width: 60 },
                    { title: '服务器别名', key: 'alias_name', width: 200, ellipsis: true, tooltip: true },
                    { title: '公网IP', key: 'public_ip', width: 160 },
                    { title: '内网IP', key: 'intranet_ip', width: 160 },
                    { title: '服务器端口', key: 'ssh_port', width: 120 },
                    { title: '服务状态', slot: 'status', width: 100 },
                    { title: '已部属项目', key: 'project_names', minWidth: 160 },
                    { title: '备注', key: 'remark', ellipsis: true, tooltip: true, minWidth: 160 },
                    { title: '更新时间', key: 'date', width: 170 },
                    { title: '操作', slot: 'action', width: 110 }
                ],
                data: [],
                modal_loading: false,
                modaldel: false,
                id: null
            }
        },
        mounted () {
            this.initial()
        },
        methods: {
            initial () {
                this.askData()
            },
            askData () {
                this.loading = true
                vpsvpsvpslist(this.params).then(res => {
                    this.data = []
                    for (let item of res.list) {
                        this.data.push({ ...item, date: this.$Date(item.updated_at * 1000).format('YYYY-MM-DD HH:mm:ss') })
                    }
                    this.loading = false
                }).catch(() => {
                    this.loading = false;
                });
            },
            handleEdit (row) {
                this.$refs.modal.initial(row)
            },
            handleDelete (row) {
                this.modaldel = true
                this.id = row.id
                this.modal_loading = false
            },
            cancel () {
                this.id = null
                this.modaldel = false
                this.modal_loading = false
            },
            del () {
                this.modal_loading = true
                vpsvpsvpsdelete({ id: this.id }).then(() => {
                    this.$Message.info('删除成功');
                    this.askData();
                    this.cancel();
                    this.modal_loading = false
                });
            }
        }
    }
</script>
